<style lang="less" scoped>
.mygrid{
  min-height:20em;
}
.button-group{
  padding: 0.5em 1.5em;
}
</style>

<template>
    <div>
        <x-header class="header" :left-options="{backText: ''}">社区服务</x-header>
        <div class="content">
            <swiper :list="swiperData" auto></swiper>
            <div class="bar"></div>
            <grid :cols="3" class="mygrid">
              <grid-item :label="x.text" v-for="(x,i) in gridData" :key="i" @click.native="onGridClick(x)">
                <img slot="icon" :src="x.src">
              </grid-item>
            </grid>
            <div class="button-group">
              <x-button :gradients="['#e8e8e8', '#e8e8e8']" @click.native="done('客服联系中，请稍候')"><div style="color:#868686;">联系客服</div></x-button>
            </div>
        </div>
    </div>
</template>
<script>
import {XHeader, Swiper, Grid, GridItem, Panel,XButton } from 'vux'

export default {
  
  data () {
    return {
     swiperData: [
        {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }, {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }
      ],
      gridData:[
        {
          text:'水费',
          src:'static/image/shequ01.png',
        },
        {
          text:'电费',
          src:'static/image/shequ02.png',
        },
        {
          text:'煤气费',
          src:'static/image/shequ03.png',
        },
        {
          text:'有线电视费',
          src:'static/image/shequ04.png',
        },
        {
          text:'暖气费',
          src:'static/image/shequ05.png',
        },
        {
          text:'预约挂号',
          src:'static/image/shequ06.png',
        },
       
      ],
    }
  },
  methods: {
    onGridClick(item){
      if(item.func){
        console.log(item.func)
        this[item.func]()
      }else if(item.url){
        window.location.href=item.url
      }else{
        this.$router.push(item.link)
      }
      
    },
    done(str){
      this.$vux.toast.show({
        text:str,
        type:"success"  
      })
    }
  },
  components: {
    XHeader,
    Swiper,
    Grid, GridItem,
    Panel,
    XButton
  }
}
</script>